<template>
  <basic-container>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="title">用户访问趋势</div>
        <div ref="chart" style="height: 400px;width: 100%;"></div>
      </el-col>
      <el-col :span="12">
        <div class="title">今日访问趋势</div>
        <div ref="visit" style="height: 400px;width: 100%;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="title">用户增长趋势</div>
        <div style="text-align: center;">
          <el-button @click="clickMonthly">按月</el-button>
          <el-button @click="clickDay">按天</el-button>
        </div>
        <div ref="growth" style="height: 400px;width: 100%;"></div>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import { visitData, visitDataHour, typeNum } from '@/api/login.js'

import * as echarts from 'echarts';
export default {
  data() {
    return {
      isDay: false,
      MonthlyList: [],
      MonthlyListData: [],
      visitDataListX: [],
      visitDataListY: [],
      visitDataListXH: [],
      visitDataListYH: []
    }
  },
  mounted() {
    this.getvisitData()
    this.getvisitDataH()
    this.getGrowthData('month')
  },
  methods: {
    clickDay() {
      this.isDay = true
      this.getGrowthData('day');
    },
    clickMonthly() {
      this.isDay = false
      this.getGrowthData('month');
    },
    // 用户增长趋势
    getGrowthData(data) {
      typeNum(data).then(res => {
        if (res.code == 200) {
          let arrX = []
          let arrY = []
          res.data.forEach(item => {
            arrX.push(item.count)
            if (this.isDay) {
              arrY.push(`${item.time}`)
            } else {
              arrY.push(`${item.time}月`)
            }
          })
          this.MonthlyList = arrY
          this.MonthlyListData = arrX
          this.initGrowthChart()
        }
      })
    },
    initGrowthChart() {
      const chart = echarts.init(this.$refs.growth);
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: true
        },
        grid: {
        },
        xAxis:
        {
          type: 'category',
          data: this.MonthlyList,
          axisTick: {
            alignWithLabel: true
          },
        },
        yAxis:
        {
          type: 'value',
          axisLabel: {
            // 使用formatter将数值转换为整数
            formatter: function (value) {
              return Math.round(value); // 四舍五入为整数
              // 或使用 parseInt(value, 10) 直接取整（会丢弃小数部分）
            }
          },
          // 可选：控制刻度生成规则，确保刻度为整数
          minInterval: 1, // 最小间隔为1
          interval: 1 // 强制间隔为1（根据数据范围调整）
        },
        series: [
          {
            name: '用户增长',
            type: 'bar',
            data: this.MonthlyListData

          },

        ],
      });
      window.addEventListener('resize', function () {
        chart.resize();
      });
    },
    // 访问量-小时
    getvisitDataH() {
      visitDataHour().then(res => {
        if (res.code == 200) {
          let arrX = []
          let arrY = []
          res.data.forEach(item => {
            arrX.push(item.count)
            arrY.push(`${item.time}时`)
          })
          this.visitDataListXH = arrX
          this.visitDataListYH = arrY
          this.initVisitChart()
        }
      })
    },
    initVisitChart() {
      const chart = echarts.init(this.$refs.visit);
      chart.setOption({
        tooltip: {},
        legend: {},
        xAxis: {
          data: this.visitDataListYH
        },
        yAxis: {
          name: '今日访问量',
          axisLabel: {
            // 使用formatter将数值转换为整数
            formatter: function (value) {
              return Math.round(value); // 四舍五入为整数
              // 或使用 parseInt(value, 10) 直接取整（会丢弃小数部分）
            }
          },
          // 可选：控制刻度生成规则，确保刻度为整数
          minInterval: 1, // 最小间隔为1
          interval: 1 // 强制间隔为1（根据数据范围调整）
        },
        series: [{
          name: '今日访问量',
          type: 'line',
          smooth: true,
          data: this.visitDataListXH
        }]
      });
      window.addEventListener('resize', function () {
        chart.resize();
      });
    },
    // 访问量-天
    getvisitData() {
      visitData().then(res => {
        if (res.code == 200) {
          let arrX = []
          let arrY = []
          res.data.forEach(item => {
            arrX.push(item.count)
            arrY.push(item.time)

          })
          this.visitDataListX = arrX
          this.visitDataListY = arrY
          this.initChart()
        }
      })
    },
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption({
        tooltip: {},
        legend: {},
        xAxis: {
          data: this.visitDataListY
        },
        yAxis: {
          name: '访问量',
          axisLabel: {
            // 使用formatter将数值转换为整数
            formatter: function (value) {
              return Math.round(value); // 四舍五入为整数
              // 或使用 parseInt(value, 10) 直接取整（会丢弃小数部分）
            }
          },
          // 可选：控制刻度生成规则，确保刻度为整数
          minInterval: 1, // 最小间隔为1
          interval: 1 // 强制间隔为1（根据数据范围调整）
        },
        series: [{
          name: '访问量',
          type: 'line',
          data: this.visitDataListX
        }]
      });
      window.addEventListener('resize', function () {
        chart.resize();
      });

    }
  }

}
</script>

<style lang="scss">
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
}
</style>
